<template>
	<div class="app-container">
		<div class="bgWhite radius8 plr20 pt30 pb30">
			<div class="mb20">
				<span class="fb fs16">{{ title }}</span>
			</div>
			<!-- 添加或修改 -->
			<el-form ref="formRef" :rules="rules" :model="form">
				<!-- <el-form-item label="毛利率分界线:" prop="executionContent.grossProfitRate" label-width="150px"
					style="width: 450px;">
					<el-input size="large" type="text" v-model="form.executionContent.grossProfitRate" />
				</el-form-item>

				<el-form-item label="商品溢价分成系数:" prop="executionContent.commodityPremium" label-width="150px"
					style="width: 450px;">
					<el-input size="large" type="text" v-model="form.executionContent.commodityPremium" />
				</el-form-item>

				<el-form-item label="赠品承担系数:" prop="executionContent.coefficientOfGiveaway" label-width="150px"
					style="width: 450px;">
					<el-input size="large" type="text" v-model="form.executionContent.coefficientOfGiveaway" />
				</el-form-item> -->

				<div class="color2 fs14 line-25 mb20">
					<div><span class="color-red">*</span>当订单毛利率低于分界线时，</div>
					<div><span class="color-red">*</span>无赠品时，根据产品的提成比例计算订单的提成金额。
						订单提成=产品1实际成交金额*产品提成比例+产品2实际成交金额*产品提成比例，</div>
					<div><span class="color-red">*</span>有赠品时，根据订单的毛利率，确定订单的整体提成比例。订单提成=订单实际成交金额*订单提成比例。</div>
				</div>

				<!-- 订单相关系数设置 -->
				<el-form-item label="">
					<el-table :data="form.executionContent.orderRatio" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }">

						<el-table-column label="订单毛利率" align="center">
							<template v-slot="scope">
								<el-input type="text" style="width:50px" v-model="scope.row.startValue" />
								~
								<el-input type="text" style="width:50px" v-model="scope.row.endValue" />
								(不含)
							</template>
						</el-table-column>

						<el-table-column label="订单提成比例" align="center">
							<template v-slot="scope">
								<el-input type="text" style="width:50px" v-model="scope.row.ratioValue" />
							</template>
						</el-table-column>

						<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
							<template v-slot="scope">
								<el-button size="mini" link class="linkBtnColor" type="text" icon="el-icon-delete"
									@click="removeOrderRow(scope.$index)" v-hasPermi="['rules:remove']">删除</el-button>
								<el-button v-if="scope.$index === form.executionContent.orderRatio.length - 1"
									size="mini" link class="linkBtnColor" type="text" icon="el-icon-delete"
									@click="addOrderRow()" v-hasPermi="['rules:add']">新增</el-button>
							</template>
						</el-table-column>
					</el-table>

				</el-form-item>

				<!-- <el-divider /> -->
				<div class="mb20 pt30">
					<span class="fb fs16">奖金提成规则</span>
				</div>
				<!-- 业绩提成规则 -->
				<el-form-item class="pt10">
					<el-table :data="form.executionContent.performanceRatio" style="width: 100%" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }">
			
						<el-table-column label="月累计销售金额（万元）" align="center">
							<template v-slot="scope">
								<el-input type="text" style="width:50px" v-model="scope.row.startValue" />
								~
								<el-input type="text" style="width:50px" v-model="scope.row.endValue" />
								(不含)
							</template>
						</el-table-column>

						<el-table-column label="业绩提成比例" align="center">
							<template v-slot="scope">
								<el-input type="text" style="width:50px" v-model="scope.row.ratioValue" />
							</template>
						</el-table-column>

						<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
							<template v-slot="scope">
								<el-button size="mini" class="linkBtnColor" type="text" icon="el-icon-delete"
									@click="removeRow(scope.$index)" v-hasPermi="['rules:remove']">删除</el-button>
								<el-button v-if="scope.$index === form.executionContent.performanceRatio.length - 1"
									size="mini" class="linkBtnColor" type="text" icon="el-icon-delete" @click="addRow()"
									v-hasPermi="['rules:add']">新增</el-button>
							</template>
						</el-table-column>
					</el-table>

				</el-form-item>
			</el-form>
			<div class="pb10">
				<div class="color2 fs14 line-25 mt15 mb20">
					<div><span class="color-red">*</span>规则生效时间：</div>
					<div><span class="color-red">*</span>规则说明：员工提成合计 = 当月订单提成金额之和 + 当月业绩奖金</div>
				</div>
				<el-button type="defaultBtn" size="large" style="width: 90px;" @click="submitForm"
					v-hasPermi="['rules:change']">确定</el-button>
			</div>

			<el-divider />
			<!-- 规则修改历史 -->
			<div class="mb20 pt10">
				<span class="fb fs16">规则修改历史</span>
			</div>
			<el-table :data="rulesHistoryList" style="width: 100%" :header-row-style="{
        background: '#FAFAFA',
        color: '#0C1019',
        height: '54px',
      }" :cell-style="{ height: '54px' }">

				<el-table-column label="时间" align="center" prop="createTime" />
				<el-table-column label="修改人" align="center" prop="userName" />

				<el-table-column label="修改记录" align="center" fixed="right" class-name="small-padding fixed-width">
					<template v-slot="scope">
						<el-button size="mini" class="linkBtnColor" type="text" icon="el-icon-delete"
							@click="openInfo(scope.row)" v-hasPermi="['rules:info']">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>


		<!-- 添加或修改物流规则对话框 -->
		<el-dialog :title="title" center v-model="open" width="800px" append-to-body>
			<div class="color333">
				<div>
					<span class="color333">
						<b>修改人：</b><span class="color2">{{infoData.userName}}</span>
					</span>
					<span class="ml20">
						<b>修改时间：</b><span class="color2">{{infoData.createTime}}</span>
					</span>
				</div>
				<!-- 订单相关系数设置 -->
				<h3 class="color333 pt20 fb">订单提成规则</h3>
				<el-table :data="infoData.rulesContent.orderRatio" style="width: 100%" :header-row-style="{
			    background: '#FAFAFA',
			    color: '#0C1019',
			    height: '54px',
			  }" :cell-style="{ height: '54px' }">

					<el-table-column label="订单毛利率" align="center">
						<template v-slot="scope">
							{{scope.row.startValue}}% ~ {{scope.row.endValue}}% (不含)
						</template>
					</el-table-column>

					<el-table-column label="订单提成比例" align="center">
						<template v-slot="scope">
							{{scope.row.ratioValue}}%
						</template>
					</el-table-column>
				</el-table>
				<!-- 业绩提成规则 -->
				<h3 class="pt20 pb10 fb">业绩整体提成规则</h3>
				<el-table :data="infoData.rulesContent.performanceRatio" style="width: 100%" :header-row-style="{
			    background: '#FAFAFA',
			    color: '#0C1019',
			    height: '54px',
			  }" :cell-style="{ height: '54px' }">

					<el-table-column label="月累计销售金额（万元）" align="center">
						<template v-slot="scope">
							{{scope.row.startValue}} ~ {{scope.row.endValue}}(不含)
						</template>
					</el-table-column>

					<el-table-column label="业绩提成比例" align="center">
						<template v-slot="scope">
							{{scope.row.ratioValue}}%
						</template>
					</el-table-column>

				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script setup name="RulesRoyaltiesSetup">
	import {
		listRules,
		updateRules
	} from "@/api/business/rules";
	import {
		listRules as listHistory
	} from "@/api/business/rules_history";

	const {
		proxy
	} = getCurrentInstance();

	const infoData = ref();
	const rulesHistoryList = ref([]);
	const open = ref(false);
	// 遮罩层
	const loading = ref(true);
	// 选中数组
	const ids = ref([]);
	// 非单个禁用
	const single = ref(true);
	// 非多个禁用
	const multiple = ref(true);
	// 显示搜索条件
	const showSearch = ref(true);
	// 总条数
	const total = ref(0);
	// 物流规则表格数据
	const rulesList = ref([]);
	// 弹出层标题
	const title = ref("订单相关系数设置");
	// 查询参数
	const queryParams = ref({
		rulesCode: "royalties",
		rulesTypeCode: "royalties",
		pageNum: 1,
		pageSize: 10,
	});
	const rules = ref({
		'executionContent.grossProfitRate': [{
			required: true,
			message: "毛利率分界线 不能为空",
			trigger: "blur"
		}, ],
		'executionContent.commodityPremium': [{
			required: true,
			message: "商品溢价分成系数 不能为空",
			trigger: "blur"
		}, ],
		'executionContent.coefficientOfGiveaway': [{
			required: true,
			message: "赠品承担系数 不能为空",
			trigger: "blur"
		}, ],
	});
	// 表单参数
	const form = ref({
		id: null,
		executionType: "1001",
		executionContent: {
			grossProfitRate: null,
			commodityPremium: null,
			coefficientOfGiveaway: null,
			userCustomerList: [{
				startValue: null,
				endValue: null,
				ratioValue: null,
			}],
			userTypeCustomerList: [{
				startValue: null,
				endValue: null,
				ratioValue: null,
			}],
		},
	});

	/** 查询 规则列表 */
	const getList = () => {
		loading.value = true;
		listRules(queryParams.value).then((response) => {
			form.value = response.rows[0];
		});
		getHistoryList();
	};

	/** 查询 规则列表 */
	const getHistoryList = () => {
		loading.value = true;
		listHistory(queryParams.value).then((response) => {
			rulesHistoryList.value = response.rows;
			console.log("rulesHistoryList======", rulesHistoryList.value)
		});
	};
	/** 提交按钮 */
	const submitForm = () => {
		console.log("=========", form.value);
		proxy.$refs["formRef"].validate((valid) => {
			if (!valid) {
				proxy.$modal.msgWarning("缺少必填项");
				return false;
			}
			updateRules(form.value).then((response) => {
				proxy.$modal.msgSuccess("修改成功");
				getList();
			});
		});
	};

	// 增加行
	const addOrderRow = () => {
		form.value.executionContent.orderRatio.push({
			startValue: null,
			endValue: null,
			ratioValue: null,
		});
	};

	//删除 内联表行
	const removeOrderRow = (rowIndex) => {
		form.value.executionContent.orderRatio.splice(rowIndex, 1);
		var l = form.value.orderRatio.length;
		if (l < 1) {
			addOrderRow()
		}
	};

	// 增加行
	const addRow = () => {
		form.value.executionContent.performanceRatio.push({
			startValue: null,
			endValue: null,
			ratioValue: null,
		});
	};

	//删除 内联表行
	const removeRow = (rowIndex) => {
		form.value.executionContent.performanceRatio.splice(rowIndex, 1);
		var l = form.value.performanceRatio.length;
		if (l < 1) {
			addRow()
		}
	};

	const openInfo = (row) => {
		infoData.value = row;
		open.value = true;
		console.log("openInfo====", infoData.value)
	}

	getList();
</script>